<template>
  <div class="login-layout">
    <div class="login-area">
      <div class="login-logo"></div>
      <div class="input-group">
        <div class="input-lock-icon"></div>
        <el-input
          placeholder="请输入密码"
          v-model="input"
          show-password
          @keyup.native.enter="onLogin()"
          ref="inputs"
        ></el-input>
        <div class="login-button" @click="onLogin()">登录</div>
      </div>
      <el-tooltip
        class="item"
        effect="dark"
        content="快速短按网关上的Reset键两次，登录密码将被重置为初始密码"
        placement="bottom"
      >
        <div class="login-forget-pwd"><u>忘记密码?</u></div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Api from "../api/api";
import { mapActions } from "vuex";
// import Vue from "vue";

export default {
  name: "LoginVue",
  data() {
    return {
      input: "",
    };
  },
  methods: {
    ...mapActions(["vuexLogin"]),
    changfouce() {
      this.$nextTick(() => {
        this.$refs.inputs.focus();
      });
    },
    async onLogin() {
      sessionStorage.clear();
      let { result } = await Api.login({
        params: {
          username: "admin",
          password: this.input,
        },
      });
      console.log("123123");
      console.log("vuexLogin", this.vuexLogin);
      this.vuexLogin(result.sid);
      sessionStorage.setItem("sid", result.sid);

      localStorage.setItem("sid", result.sid);
      await this.$router.push({ path: "/index" });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-layout {
  height: 100vh;
  width: 100%;
  background-color: #253140;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-area {
    .login-logo {
      width: 404px;
      height: 75px;
      background: url(~@/assets/sprite.png) no-repeat -73px -380px;
    }

    .input-group {
      margin-top: 80px;
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.904);

      .input-lock-icon {
        width: 23px;
        height: 26px;
        background: url(~@/assets/sprite.png) no-repeat -120px -80px;
        margin-left: 5px;
        margin-top: 5px;
      }

      .el-input--suffix {
        width: 284px;
        height: 30px;

        ::v-deep .el-input__inner {
          background-color: #253140;
          border: none;
          width: 100%;
          height: 100%;
          text-align: center;
          display: flex;
          color: white;
          padding-top: 10px;
          font-size: 24px;
          margin-left: 40px;
        }
      }

      .login-button {
        box-sizing: border-box;

        padding-left: 34px;
        line-height: 39px;
        margin-left: 50px;
        width: 93px;
        height: 39px;
        background: url(~@/assets/sprite.png) no-repeat -77px -285px;
        color: #fff;
        font-size: 20px;

        &:hover {
          background: url(~@/assets/sprite.png) no-repeat -193px -285px;
        }
      }
    }

    .item {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
      color: #929292;
      font-size: 16px;
    }
  }
}
</style>
